/**
 * Created by ziyu on 17/3/7.
 */
import React, {Component, PropTypes} from 'react'
import {Table, Card, Button, Row, Col, Icon, Tag, message, Spin} from 'antd'
import {fetchPost} from '../../../utils/request'
import Styles from './Index.less'

class Detail extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      item: props.item,
      params: props.params,
      outboundInfo: null,
      loading: false,
    }
  }

  componentWillReceiveProps(props) {
    if (props.item != this.state.item) {
      this.setState({
        item: props.item,
        params: props.params
      }, () => {
        this.getData()
      })
    }
  }

  getData() {
    this.setState({
      loading: true
    })
    const {batchNo, mobile} = {...this.state.item}
    fetchPost(`/collection/outbound/call/detail`, {batchNo, mobile}).then((res) => {
      if (res.code === 0) {
        this.setState({
          outboundInfo: res.data.outboundInfo,
          loading: false
        })
      } else {
        message.error(res.msg)
        this.setState({
          outboundInfo: null
        })
      }
    })
  }

  createContent() {
    let outboundInfo = this.state.outboundInfo
    let content = []
    if (outboundInfo != null) {
      content.push(
        <div key='batchNo' className={Styles.content}>
          <span style={{width: '20%'}}>batchNo</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.batchNo}</span>
        </div>,
        <div key='callDate' className={Styles.content}>
          <span style={{width: '20%'}}>callDate</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.callDate}</span>
        </div>,
        <div key='tradeNo' className={Styles.content}>
          <span style={{width: '20%'}}>tradeNo</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.tradeNo}</span>
        </div>,
        <div key='mobile' className={Styles.content}>
          <span style={{width: '20%'}}>mobile</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.mobile}</span>
        </div>,
        <div key='botenceId' className={Styles.content100}>
          <span style={{width: '20%'}}>botenceId</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.botenceId}</span>
        </div>,
        <div key='status' className={Styles.content}>
          <span style={{width: '20%'}}>status</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.status}</span>
        </div>,
        <div key='callStartTime' className={Styles.content}>
          <span style={{width: '20%'}}>callStartTime</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.callStartTime}</span>
        </div>,
        <div key='answerTime' className={Styles.content}>
          <span style={{width: '20%'}}>answerTime</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.answerTime}</span>
        </div>,
        <div key='duration' className={Styles.content}>
          <span style={{width: '20%'}}>duration</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.duration}</span>
        </div>,
        <div key='billSec' className={Styles.content}>
          <span style={{width: '20%'}}>billSec</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.billSec}</span>
        </div>,
        <div key='hangupTime' className={Styles.content}>
          <span style={{width: '20%'}}>hangupTime</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.hangupTime}</span>
        </div>,
        <div key='hangupDirection' className={Styles.content}>
          <span style={{width: '20%'}}>hangupDirection</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.hangupDirection}</span>
        </div>,
        <div key='accurateIntent' className={Styles.content}>
          <span style={{width: '20%'}}>accurateIntent</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.accurateIntent}</span>
        </div>,
        <div key='reason' className={Styles.content100}>
          <span style={{width: '20%'}}>reason</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.reason}</span>
        </div>,
        <div key='remarks' className={Styles.content}>
          <span style={{width: '20%'}}>remarks</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.remarks}</span>
        </div>,
        <div key='freason' className={Styles.content}>
          <span style={{width: '20%'}}>freason</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.freason}</span>
        </div>,
        <div key='detailList' className={Styles.content100}>
          <span style={{width: '20%'}}>detailList</span>
          :
          <span style={{width: '80%', paddingLeft: 5}}>{outboundInfo.detailList}</span>
        </div>,
      )
    }
    return content
  }

  getTitle() {
    let outboundInfo = this.state.outboundInfo
    if (!outboundInfo) {
      return 'Details (NULL)'
    }

    return 'Details'
  }

  message() {
    if (this.state.message) {
      this.state.timer = setTimeout(() => {
        this.setState({
          message: ''
        })
      }, 3000)
      return (
        <span className='color-warning warning-animate'><Icon type='info-circle-o'/> {this.state.message}</span>
      )
    } else {
      return ''
    }
  }

  render() {
    return (
      <div className={Styles.detailModule}>
        <Spin spinning={this.state.loading} delay={1}>
          <Card title={this.getTitle()} extra={this.message()} bodyStyle={{padding: 0, overflow: 'auto'}}
                noHovering={true}>
            {this.createContent()}
          </Card>
        </Spin>
      </div>
    )
  }
}

export default Detail
